<template>
    <div class="member-layout" >
        <div class="info-back  search-part">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="back-icon" @click="backToInfo">
                        <i class="fa fa-arrow-left" aria-hidden="true"></i>
                    </div>
                </el-col>
                <el-col :span="10" class="btns">
                    <el-button type="text" class="save red-btn" @click="onSave" v-if="!this.$route.params.actItem">
                        保存
                    </el-button>
                    <el-button type="text" class="save red-btn" @click="onSubmit" v-if="this.$route.params.actItem">
                        确定
                    </el-button>
                </el-col>
            </el-row>
        </div>
        <div class="memeber-manage-con" id="myDIV">
            <waterfall
                    :line-gap="250"
                    :max-line-gap="360"
                    :min-line-gap="220"
                    :fixed-height="true"
                    :watch="items"
                    align="center">
                <!-- each component is wrapped by a waterfall slot -->
                <waterfall-slot
                        v-for="(item, index) in allItems"
                        :width="250"
                        :height="195"
                        :order="index"
                        :key="item.id"
                >
                    <div>
                        <v-billcomp
                                :item="item"
                                :index="index"
                                class="item"
                                :backSelectItems="selectItems"
                                :backItems="getCurrentSelectItems"
                                :isGoods="isGoods"
                                :currentRadio ="currentRadio"
                                :isMutpart="isMutpart"
                        >
                            <div class="text">
                                <h6 class="l1">{{item.name}}</h6>
                                <span class="l1 remark">{{item.remark || '暂无描述'}}</span>
                                <span class="l1"><span class="span1">单价</span>{{ Number(item.price || 0).toFixed(2) }}</span>
                                <span v-if="!isPurchase"><span class="span2">会员价</span>{{ Number(item.memberPrize || 0).toFixed(2) }}</span>
                                <span v-if="isPurchase">
                                    <span>采购价</span>
                                    <input type="number" class="text-number" :min="0" v-model="item.purchasePrice" v-on:click.stop>
                                </span>
                                <span class="text-numspan">
                                    <span>数&nbsp;&nbsp;&nbsp;量</span>
                                    <input type="number" class="text-number" :min="0" v-model="item.quantity" v-on:click.stop>
                                </span>
                            </div>
                        </v-billcomp>
                    </div>
                </waterfall-slot>
            </waterfall>
        </div>
    </div>
</template>

<script>
    import vSimpsearch from '../page/SimpSearch.vue';
    import * as type from '../../store/types';
    import vBillcomp from '../common/BillComp.vue';
    import Waterfall from 'vue-waterfall/lib/waterfall.vue';
    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot';
    export default {
        name:"keepalive-false",
        components: {
            vSimpsearch,vBillcomp,Waterfall, WaterfallSlot
        },
        data: function () {
            return {
                loading: true,
                allItems:[],
                items: [],
                Actid:'',
                userId: '',
                actItem:'',
                open:false,
                list:[],
                rows:20,
                page: 1,
                totalPage: 1,
                list:[],
                classItem: [],
                checkList: {},
                num:[],
                loading: true,
                isGoods: true,
                selectItems: [],
                currentRadio: {index:-1},
                isMutpart:false,
//                value:0
                quantity:0,
                selectGoods:'',
                isPurchase:false

            }
        },
        watch: {
            param(val){
                this.items = [];
                this.page = 1;
                this.totalPage = 1;
                this.loadMore();
            }
        },

        mounted: function () {
            if(this.$route.params.isPurchase){
                this.isPurchase = true;
            }else {
                this.isPurchase = false;
            }
            console.log(this.$route.params)
            if(this.$route.params.isDeliveryPage||this.$route.params.isActivityPage){
                this.isMutpart=true;
            }else{
                this.isMutpart=false;
            }
            this.allItems='';
            this.num=[];
            console.log("=============>mounted")
            this.loadMore();
            let self = this;
            this.$$("#content").scrollTop(0)
            this.$$("#content").on('scroll', function (e) {
                var scrollTop = self.$$("#content").scrollTop();
                var innerHeight = self.$$("#content").innerHeight();
                var scrollHeight = self.$$("#content").scrollHeight();
                if (scrollTop + innerHeight >= scrollHeight) {
                    self.page++;
                    if (self.page > self.totalPage) {
                        return;
                    }
                    self.loading = true;
                    self.loadMore();
                    console.log('*(******************' + self.page)
                }
            });

            document.getElementById("myDIV").addEventListener('wheel', function (e) {
                if (e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0) {
                    console.log(e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0)
                    self.page++;
                    self.loading = true;
                    self.loadMore();
                }
            });

            this.$$(window).resize();
        },
        methods: {
            handleChange(index,item) {

            },
            loadMore() {
                console.log("==============>loadMore")
                console.log(this.$route.params)

                var  url = this.$route.params.url;
                console.log(url)
                if (this.page <= this.totalPage) {
                    this.loading = true;
                    let self = this;
                    this.$axioxs.get(url)
                        .then(function (res) {
                            self.totalPage = res.data.totalPage;
                            self.allItems = res.data.records;
                            self.allItems.forEach(item => {
                                item.height = 265;
                                item.width = 300;
                                self.items.push(item);
                            });
                            self.loading = false;
                        })
                        .catch(function (error) {
                            console.log(error);
                            self.$message({
                                showClose: true,
                                type: 'error',
                                message: error,
                                onClose:function () {
                                    self.loading = false;
                                }
                            });
                        });
                }
            },
            getCurrentSelectItems: function (items) {
                this.selectGoods=items;
            },
            backToInfo:function () {
                var backurl = this.$route.params.backurl;
                var activeName =this.$route.params.activeName;
                var backName =this.$route.params.backName;
                if(this.$route.params.actItem){
                    this.$router.push({
                        name:backName,
                        path: backurl,
                        params: {
                            item: this.$route.params.item,
                            activeName: activeName,
                            newComp:"newComp",
                            args:this.$route.params.actItem
                        }
                    });
                }else{
                    this.$router.push({
                        name:backName,
                        path: backurl,
                        params: {
                            item: this.$route.params.item,
                            activeName: activeName,
                            isBack:1
                        }

                    });
                }
            },
            onSave:function () {
                let list = this.selectGoods;
                let saveurl = this.$route.params.saveurl;
                var backurl = this.$route.params.backurl;
                var activeName =this.$route.params.activeName;
                var item =this.$route.params.item;
                var backName =this.$route.params.backName;
                var isReturn  = false;
                if(this.$route.params.isActivityPage){
                    var args=[];
                    for(var i=0;i<list.length;i++){
                        var objGood={};
                        objGood.goods={};
                        objGood.goods.id=list[i].id;
                        objGood.owner={};
                        objGood.owner.id=item.id
                        objGood.quantity =list[i].quantity;
                        objGood.goodName=list[i].name;
                        args.push(objGood)
                    }
                    args.forEach((item)=>{
                        console.log(item)
                        if(item.quantity == undefined){
                            this.$message({
                                showClose: true,
                                type: 'error',
                                message: '数量至少为1'
                            });
                            isReturn = true;
                        }
                    });
                    if(args.length == 0){
                        this.$message({
                            showClose: true,
                            type: 'error',
                            message: '请至少选择一项'
                        });
                        isReturn = true;
                    }
                }
                if(this.$route.params.isDeliveryPage){
                    var args=[];
                    if(this.$route.params.isPurchase){
                        for(var i=0;i<list.length;i++){
                            var objGood={};
                            objGood.goods={};
                            objGood.goods.id=list[i].id;
                            objGood.quantity =list[i].quantity;
                            objGood.purchasePrice=list[i].purchasePrice;
                            objGood.owner={};
                            objGood.owner.id=item.id;
                            objGood.state=list[i].state;
                            args.push(objGood)
                        }
                    }else{
                        for(var i=0;i<list.length;i++){
                            var objGood={};
                            objGood.goods={};
                            objGood.goods.id=list[i].id;
                            objGood.owner={};
                            objGood.owner.id=item.id
                            objGood.quantity =list[i].quantity;
                            objGood.state=list[i].state;
                            args.push(objGood)
                        }
                    }
                    args.forEach((item)=>{
                        console.log(item)
                        if(item.quantity == undefined){
                            this.$message({
                                showClose: true,
                                type: 'error',
                                message: '数量至少为1'
                            });
                            isReturn = true;
                        }
                    });
                    console.log(args)
                    if(args.length == 0){
                        this.$message({
                            showClose: true,
                            type: 'error',
                            message: '请至少选择一项'
                        });
                        isReturn = true;
                    }
                }
                if(isReturn == false){
                    let self=this;
                    this.$axioxs.post(saveurl, args)
                        .then(function (res) {
                                self.$store.commit(type.CHANGE_INDEX, backurl);
                                self.$router.push({
                                        name: backName,
                                        path: backurl,
                                        params:{
                                            activeName: activeName,
                                            item:item,
                                            isBack:1
                                        }
                                    }
                                )
                            },
                            (res) => {
                                this.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            })
                }
            },
            onSubmit:function () {
                let list = this.selectGoods;
                var backurl = this.$route.params.backurl;
                var activeName =this.$route.params.activeName;
                var backName =this.$route.params.backName;
                var item =this.$route.params.item;
                var isReturn  = false;
                if(this.$route.params.isDeliveryPage){
                    var args=list;
                    for(var i=0;i<list.length;i++){
                        args[i].goodsName=args[i].name;
                    }
                    args.forEach((item)=>{
                        console.log(item)
                        if(item.quantity == undefined){
                            this.$message({
                                showClose: true,
                                type: 'error',
                                message: '数量至少为1'
                            });
                            isReturn = true;
                        }
                        if(this.$route.params.isPurchase){
                            if(item.purchasePrice == undefined){
                                this.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: '采购价不能为空'
                                });
                                isReturn = true;
                            }
                        }else{
                            isReturn = false;
                        }

                    });
                    if(args.length == 0){
                        this.$message({
                            showClose: true,
                            type: 'error',
                            message: '请至少选择一项'
                        });
                        isReturn = true;
                    }
                }else if(this.$route.params.isActivityPage){
                    var args=list;
                    for(var i=0;i<list.length;i++){
                        args[i].goods={};
                        args[i].goods.name = list[i].name
                    }
                    console.log(list)
                    args.forEach((item)=>{
                        console.log(item)
                        if(item.quantity == undefined){
                            this.$message({
                                showClose: true,
                                type: 'error',
                                message: '数量至少为1'
                            });
                            isReturn = true;
                        }
                    });
                    if(args.length == 0){
                        this.$message({
                            showClose: true,
                            type: 'error',
                            message: '请至少选择一项'
                        });
                        isReturn = true;
                    }
                }
                if(isReturn == false){
                    args.push.apply(args,this.$route.params.actItem||[])
                    let self=this;
                    self.$router.push({
                            name: backName,
                            path: backurl,
                            params:{
                                activeName: activeName,
                                args:args,
                                item:item,
                            }
                        }
                    )
                }
            },
            onAdd:function () {

            },
        }
    }
</script>

<style scoped>
    .item {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        font-size: 1.2em;
        color: rgb(0, 158, 107);
    }
    #myDIV {
        margin: 0px 20px;
    }

    .search-layout {
        padding: 10px;
        background-color: #fff;
    }

    .text {
        margin-bottom: 1em;
    }

    .text h6 {
        margin-bottom: 5px;
    }

    .span1 {
        background-color: #3eb3f9;
        border-radius: 20px;
        padding: 2px 5px;
        color: #fff !important;
        font-size: .8em;
        margin-right: 3px;
    }

    .span2 {
        background-color: #6699ff;
        border-radius: 20px;
        padding: 2px 5px;
        color: #fff !important;
        font-size: .8em;
        margin-right: 3px;
    }

    .remark {
        padding: 3px 0;
    }
    .text-number{
        width: 50%;
        height: 27px;
        border: 1px solid #cacaca;
        border-radius: 3px;
    }
    .text-numspan{
        display: block;
    }
</style>
